{% extends 'login/base.html' %}
{% load staticfiles %}
{% block title %}主页{% endblock %}
{% block content %}
    <img style="width: 100%;height: 500px" src="{% static 'img/banner.jpg' %}">
    <div style="padding:3% 10% 0 10%;">
        {% if request.session.is_login %}
        <h1>{{ request.session.user_name }},欢迎使用图书查询系统!</h1>
        <form action="/index/" method="post">
                            {% csrf_token %}
            <div class="row">
                <div class="col-lg-12">
                    <div class="input-group">
                      <input style="height: 44px" type="text" class="form-control" placeholder="Search for..." name="content">
                      <span class="input-group-btn">
                        <button style="padding: 11px 12px" class="btn btn-default" type="submit">查询</button>
                      </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </form>
{% if books %}
        <p style="text-align: right;margin-top: 20px"><a href="/book/{{ category }}">更多信息&gt;&gt;</a></p>
    </div>
    <p>{{ max_rating }}</p>
    <div id="container" style="height:400px;padding: 0 50px 30px 50px"></div>
    <div id="container_new" style="height: 400px;padding: 0 50px 30px 50px"></div>
    <div id="container_new2" style="height: 400px;padding: 0 50px 30px 50px"></div>
    <img style="width: 100%;height: 500px" src="{% static 'img/banner2.jpeg' %}">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>    <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: '图书评分',
            subtext: '数据来自豆瓣'
        },
        color: ['#3bcec6'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['图书评分']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: {{ x|safe }},
        },
        series: [
            {
                name: '评分',
                type: 'bar',
                data: {{ y1|safe }},
            },

        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
       </script>

    <script type="text/javascript">
var dom = document.getElementById("container_new");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title: {
        text: '图书评论人数',
        subtext: '数据来自豆瓣'
    },
    color: ['#3bcec6'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['评论人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: {{ x|safe }},
    },
    series: [
        {
            name: '',
            type: 'bar',
            data: {{ y2|safe }}
        },

    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
    <script type="text/javascript">
        var dom = document.getElementById("container_new2");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['图书评分', '评论人数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: {{ x|safe }},
            },
            series: [
                {
                    name: '图书评分',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{ y1|safe }},
                },
                {
                    name: '评论人数',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{ y2|safe }}
                },

            ]
        };;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
       </script>

{% else %}
        {% if content %}
            <p>{{ content }}</p>
        {% endif %}
    {% endif %}

        {% else %}
        <h1>您尚未登陆，请登录以后进行查询！</h1>
        {% endif %}
{% endblock %}

